Intro
A simple SaaS app framework with collapsible sidebar
A classic SaaS app with header, sidebar and main content area. Sidebar is shown or hidden based on a given width threshold and the window width, and can be toggled open or closed using the hamburger menu in the top left of the header.
Demo
Simple SaaS App Framework
Drop your content into the component and it will show up here.
This placeholder text should demonstrate scrolling behaviour.
Suspendisse eget luctus elit, varius venenatis ipsum. Quisque venenatis purus ac ultrices facilisis. Donec non nisl libero. Mauris eu leo vel orci laoreet vehicula. Nunc pulvinar nunc id lectus tincidunt suscipit. Fusce nec sapien ligula. Sed nisi urna, mattis ut facilisis sit amet, gravida ac nunc. Ut non pharetra massa, non aliquet nibh. Maecenas vehicula, eros at consectetur sollicitudin, justo orci dapibus lacus, in sollicitudin est leo non quam.
Fusce at risus ex. In pulvinar tellus quis nibh facilisis tincidunt. Nunc et nisl ipsum. Fusce sed mauris in arcu iaculis imperdiet vitae id orci. Integer imperdiet facilisis aliquam. Praesent feugiat vehicula neque ac commodo. Quisque tincidunt neque augue, id pulvinar nibh venenatis porttitor. Mauris sagittis justo non elit tristique placerat. Maecenas in nulla vel dolor lobortis pharetra. Mauris pulvinar tincidunt neque, sagittis dapibus erat dapibus eget. Pellentesque id imperdiet felis. Etiam in quam tellus. In condimentum velit sed augue euismod interdum.
Suspendisse eget luctus elit, varius venenatis ipsum. Quisque venenatis purus ac ultrices facilisis. Donec non nisl libero. Mauris eu leo vel orci laoreet vehicula. Nunc pulvinar nunc id lectus tincidunt suscipit. Fusce nec sapien ligula. Sed nisi urna, mattis ut facilisis sit amet, gravida ac nunc. Ut non pharetra massa, non aliquet nibh. Maecenas vehicula, eros at consectetur sollicitudin, justo orci dapibus lacus, in sollicitudin est leo non quam.
Fusce at risus ex. In pulvinar tellus quis nibh facilisis tincidunt. Nunc et nisl ipsum. Fusce sed mauris in arcu iaculis imperdiet vitae id orci. Integer imperdiet facilisis aliquam. Praesent feugiat vehicula neque ac commodo. Quisque tincidunt neque augue, id pulvinar nibh venenatis porttitor. Mauris sagittis justo non elit tristique placerat. Maecenas in nulla vel dolor lobortis pharetra. Mauris pulvinar tincidunt neque, sagittis dapibus erat dapibus eget. Pellentesque id imperdiet felis. Etiam in quam tellus. In condimentum velit sed augue euismod interdum.
Components
framework 01
Slots
defaultMain content area. Drop a div in here, set the width and height to 100% and then style colours etc.headerHeader content. Drop a div in here and set the size to flex: 1 so it fills the width of the header area. The hamburger menu is fixed. Use the header_bg_colour to set the background colour of the whole header.sidebarSidebar content. I like dropping a div, setting the height to 100%, padding 1rem, and justify-content: space-between. Then 2 divs inside show up at the top and bottom of the sidebar.Attributes
sidebar_widthThe width of your sidebar (rem)threshold_widthThe width of the viewport under which the sidebar will be hidden. (px)header_bg_colourHeader background colour.
Notes
Notes
I'm not sure this package is 100% toddle-correct (toddly?) so please feel free to let me know where I can improve things. As I make updates I will note them below.
Releases
2024-12-12First release. I'm actually using this in one of my own apps.